<template>
  <div class="host">
    <h3 class="title" style="margin-bottom: 20px">主持人管理</h3>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="formInline.username"
          placeholder="姓名（可不填）"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formInline.status" placeholder="账号状态">
          <el-option label="" value=""></el-option>
          <el-option label="正常" value="zhengchang"></el-option>
          <el-option label="禁用" value="jinyong"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formInline.num">
          <el-option label="" value=""></el-option>
          <el-option label="订单量降序" value="orderdesc"></el-option>
          <el-option label="订单量升序" value="orderasc"></el-option>
          <el-option label="权重升序" value="asc"></el-option>
          <el-option label="权重降序" value="desc"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formInline.star" placeholder="星推荐">
          <el-option label="" value=""></el-option>
          <el-option label="推荐" value="tuijian"></el-option>
          <el-option label="不推荐" value="butuijian"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formInline.discount" placeholder="折扣">
          <el-option label="" value=""></el-option>
          <el-option label="有折扣" value="has"></el-option>
          <el-option label="无折扣" value="without"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="addHostHandle">添加主持人</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="添加主持人"
      :visible.sync="dialogAddVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        :model="addForm"
        status-icon
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="hname">
          <el-input type="text" v-model="addForm.hname"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="hphone">
          <el-input type="text" v-model="addForm.hphone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="hemail">
          <el-input type="text" v-model="addForm.hemail"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="hpwd">
          <el-input type="password" v-model="addForm.hpwd"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSure">确 定</el-button>
      </span>
    </el-dialog>
    <p>
      共检索<span>{{ nums }}</span
      >条记录
    </p>
    <el-table :data="hostData" border style="width: 100%">
      <el-table-column prop="strong" label="权重" width="60"> </el-table-column>
      <el-table-column prop="hname" label="姓名" width="80"> </el-table-column>
      <el-table-column prop="hphone" label="手机号" width="120">
      </el-table-column>
      <el-table-column prop="starttime" label="开通时间" width="200">
      </el-table-column>
      <el-table-column prop="hpprice" label="价格" width="100">
      </el-table-column>
      <el-table-column prop="num" label="订单量" width="100"> </el-table-column>
      <el-table-column prop="hpdiscount" label="折扣" width="100">
      </el-table-column>
      <el-table-column prop="hpstart" label="星推荐" width="100">
      </el-table-column>
      <el-table-column prop="status" label="账号状态" width="100">
      </el-table-column>
      <el-table-column label="操作">
        <el-button>权限设置</el-button>
        <el-button>账号状态</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import api from "../../api";

export default {
  name: "HostAdmain",
  data() {
    return {
      formInline: {
        username: "",
        status: "",
        num: "",
        star: "",
        discount: "",
      },
      hostData: [],
      nums: 0,
      dialogAddVisible: false,
      addForm: {
        hname: "",
        hphone: "",
        hemail: "",
        hpwd: "",
      },
    };
  },
  methods: {
    http() {
      api.hostManager().then((res) => {
        if (res.status === 200) {
          this.hostData = res.data;
          this.nums = res.data.length;
        }
      });
    },
    onSubmit() {
      api.hostManager().then((res) => {
        // console.log(res);
        if (res.status == 200) {
          //这个是排序关键
          // console.log(this.formInline.order);

          // console.log(res.data);

          for (let ele of res.data) {
            ele.starttime = ele.starttime.slice(0, 10);
            //为了排序 随机数
            ele.order = ~~(Math.random() * 1000 + 100);
            if (ele.status == 1) {
              ele.status = "正常";
            } else {
              ele.status = "禁用";
            }
          }

          //排序
          /**
         订单量降序  orderdesc
         订单量升序 orderasc
         权重升序  asc
         权重降序 desc
         */

          //  console.log(this.formInline.order);
          switch (this.formInline.num) {
            case "orderdesc":
              // console.log('订单量降序');
              res.data.sort((ele1, ele2) => {
                return (ele1.num - ele2.num) * -1;
              });
              break;
            case "orderasc":
              // console.log('订单量升序');
              res.data.sort((ele1, ele2) => {
                return ele1.num - ele2.num;
              });
              break;
            case "asc":
              // console.log('权重升序');
              res.data.sort((ele1, ele2) => {
                return ele1.strong - ele2.strong;
              });
              break;
            case "desc":
              // console.log('权重降序');
              res.data.sort((ele1, ele2) => {
                return (ele1.strong - ele2.strong) * -1;
              });
              break;
            default:
              break;
          }

          //判断账号状态
          res.data = this.accountStatus(res.data);

          //是否推荐
          res.data = this.ifStar(res.data);

          //是否有折扣
          res.data = this.ifDiscount(res.data);

          //是否有名字
          res.data = this.ifUsername(res.data);

          this.nums = res.data.length;
          this.hostData = res.data;
        }
      });
    },
    //账号状态 status
    /**
     * 正常 zhengchang
     * 禁用 jinyong
     */
    accountStatus(arr) {
      //正常 zhengchang
      let newArr = [];
      if (this.formInline.status == "zhengchang") {
        for (let ele of arr) {
          if (ele.status == "正常") {
            newArr.push(ele);
          }
        }
      } else if (this.formInline.status == "jinyong") {
        for (let ele of arr) {
          if (ele.status == "禁用") {
            newArr.push(ele);
          }
        }
      } else {
        return arr;
      }
      return newArr;
    },
    //推荐 star
    /**
     * 推荐 tuijian
     * 不推荐 butuijian
     */
    ifStar(arr) {
      let newArr = [];
      if (this.formInline.star == "tuijian") {
        for (let ele of arr) {
          if (ele.hpstart == "是") {
            newArr.push(ele);
          }
        }
      } else if (this.formInline.star == "butuijian") {
        for (let ele of arr) {
          if (ele.hpstart == "否") {
            newArr.push(ele);
          }
        }
      } else {
        return arr;
      }
      return newArr;
    },
    //discount 折扣
    /**
     * 有折扣 has
     * 无折扣 without
     */
    ifDiscount(arr) {
      let newArr = [];
      if (this.formInline.discount == "has") {
        for (let ele of arr) {
          if (ele.hpdiscount > 0) {
            newArr.push(ele);
          }
        }
      } else if (this.formInline.discount == "without") {
        for (let ele of arr) {
          if (ele.hpdiscount == 0) {
            newArr.push(ele);
          }
        }
      } else {
        return arr;
      }
      return newArr;
    },
    //是否有名字 username
    ifUsername(arr) {
      if (this.formInline.username.trim() == "") {
        return arr;
      }
      let newArr = [];
      for (let ele of arr) {
        if (ele.hname == this.formInline.username) {
          newArr.push(ele);
        }
      }
      return newArr;
    },
    // 添加主持人对话框关闭事件
    handleClose() {
      this.dialogAddVisible = false;
    },
    // 添加主持人对话框打开事件
    addHostHandle() {
      this.dialogAddVisible = true;
    },
    // 添加主持人确定事件
    addSure() {
      api
        .addHost({
          hname: this.addForm.hname,
          hpwd: this.addForm.hpwd,
          hemail: this.addForm.hemail,
          hphone: this.addForm.hphone,
        })
        .then((res) => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
            });
            this.dialogAddVisible = false;
            this.http();
          }
        });
    },
  },
  mounted() {
    //
    this.http();
  },
};
</script>

<style lang="less" scoped>
.host {
  padding-left: 20px;
  .title {
    text-align: center;
    padding: 20px;
    background-color: #c4b4a9;
    margin-bottom: 10px;
  }
}
</style>